<template>
	<view>
		<view v-if="layertype!='chooselayer'" @click="dataobj.editable?layerclick('layer'):''" :style="{'background-color':dataobj.editable?'#f8f8f8':'#fff'}" style="padding: 8px 18px;color: #aaa;font-size: 14px; display: flex;flex-direction: row;justify-content: space-between;">
			<view style="display: flex;align-items: center;color: #666;">{{dataobj.coltext}} 
				<view v-if="dataobj.isnotnull" style="color: #F55C23;font-size: 6px;padding: 13px 0;" class="iconfont icon-jiufuqianbaoicon14"></view>
			</view>
			<view style="color: #aaa;display: flex;flex-direction: row;align-items: center;" >
				<view>{{dataobj.coldisplay}}</view>
			</view>
		</view>
		<view v-else :style="{'background-color':!dataobj.editable?'#fff':'#f8f8f8'}" style="color: #666;font-size: 14px; display: flex;flex-direction: row;justify-content: space-between;">
			<view style="display: flex;align-items: center;">{{dataobj.coltext}} <view v-if="dataobj.isnotnull" style="color: #F55C23;font-size: 6px;padding: 13px 0;" class="iconfont icon-jiufuqianbaoicon14"> </view></view>
			<view style="color: #aaa;display: flex;flex-direction: row;width: 60vw;align-items: center;">
				<input @input="inputitem($event)" :placeholder="dataobj.placeholder" placeholder-style="color:#aaa;font-size:14px;" style="padding: 8px 0; text-align:middle;display: flex; justify-content: center;" :disabled="!dataobj.iscancursorinputwhenchoosedata" :value="dataobj.coldisplay" :type="dataobj.coltype"/>
				<view v-if="dataobj.editable && JSON.stringify( dataobj.layercontent.content)!='[]'" style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin: -2px 0;">
					<view  style="display: flex;padding: 13px 0; justify-content: center; width: 40px;border-left: 1px solid #f8f8f8;border-right: 1px solid #f8f8f8;color: #f8f8f8;" class="iconfont icon-jianqu"></view>
					<view @click="layerclick('layer')"  style="display: flex;padding: 13px 0; justify-content: center; width: 40px;border-left: 1px solid #f0f0f0;border-right: 1px solid #f0f0f0;color: #00B6F6;" class="iconfont icon-jiantou"></view> 
				</view>
			</view>
		</view>
		<view v-if="ismask" @click="closemasklayer" class="mask-wrapper">
			<scroll-view scroll-y="true" @click.stop="" class="mask-content" :style="{'margin-top':layerheightmargin+'px','height':layerheight+'px'}">
				<view class="mask-view">
					<view class="mask-detail">
						<view class="title">
							<view class="titlename"></view> {{layercontent.title}}
						</view>
						<view @click.stop="selectlayer(index2)" v-for="(dataobj, index2) in layercontent.content" :key="index2" >
							<view class="split"></view>
							<view class="itemcont">
								<view>{{dataobj.layerdisplay}}</view>
								<view v-if="layercontent.isselected==index2" class="iconfont icon-dui" style="color: #F55C23;"></view>
							</view>
						</view> 
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				ismask:false,
				layercontent:{},
				layerheight:0,
				layerheightmargin:0,
				clientHeight:0
			}
		},
		props:{
			dataobj:{
				type:Object
			},
			index2:{
				type:Number
			},
			index3:{
				type:Number
			},
			layertype:{
				type:String
			},
			property:{
				type:Object
			}
		},
		methods:{
			closemasklayer(){
				this.ismask = false
			},
			
			selectlayer(index){
				 var that = this
				 that.layercontent.isselected =index
				 that.dataobj.colvalue  = that.layercontent.content[index].colvalue 
				 that.dataobj.coldisplay  = that.layercontent.content[index].coldisplay 
				 if(index!=0){
					that.dataobj.isselected = true
				 }else{
					that.dataobj.isselected = false
				 }
				 that.ismask = false
				 that.dataobj.ismodified = true
				 that.$emit('changeData',that.index3,that.index2,that.dataobj)
			},
			
			inputitem(event){
				var that = this
				that.dataobj.colvalue = event.detail.value
				that.dataobj.coldisplay = event.detail.value
				that.dataobj.ismodified = true
				that.$emit('changeData',that.index3,that.index2,that.dataobj)
			},
			
			layerclick(type){
				var that = this
				var detailvalue = that.dataobj.colvalue
				var detailvalue1 = that.dataobj.coldisplay
				if(detailvalue==''){
					detailvalue = 0
					detailvalue1 = 0
				}
				if(type == 'layer'){
					var layercontent = that.dataobj.layercontent
					if(JSON.stringify(layercontent.content) !='[]'){
						that.layercontent = layercontent
						that.ismask = true
						that.layerheight = 44  + that.layercontent.content.length * 44
						uni.getSystemInfo({
						  success: function (res) {
								that.clientHeight = res.windowHeight;
								that.layerheightmargin = (that.clientHeight - that.layerheight)/2
							}
						});
					}
				}
			},
			
		}
	}
</script>

<style>
	.mask-wrapper{backface-visibility: hidden;top: 0;right: 0;left: 0;bottom: 0;position: fixed;overflow: hidden;width: 100%;height: 100%;opacity: 1;background-color: rgba(0,0,0,0.4);z-index: 900;}
	.mask-wrapper .mask-content{border-radius: 10px; margin-left: 80px; opacity: 1;width: calc(100vw - 160px);background-color: #fff;z-index: 900;}
	.mask-wrapper .mask-content .mask-view{margin: 5px 0 ;overflow-y: scroll;overflow-x: hidden;height: 100%;position: relative;}
	.mask-wrapper .mask-content .mask-view .mask-detail{display: flex;flex-direction: column;padding: 0 20px;}
	.mask-wrapper .mask-content .mask-view .mask-detail .title{display: flex;flex-direction: row;align-items: center;padding: 10px 0;}
	.mask-wrapper .mask-content .mask-view .mask-detail .title .titlename{height: 10px;width: 3px;background-color: #F55C23;display: flex;margin-left: -20px;margin-right: 17px;}
	.mask-wrapper .mask-content .mask-view .mask-detail .split{height: 1px;width: 100%;border-bottom: #f0f0f0 1px dashed;}
	.mask-wrapper .mask-content .mask-view .mask-detail .itemcont{padding: 10px 0; color: #666;font-size: 14px; display: flex;flex-direction: row;justify-content: space-between;}
</style>
